<template>
	<view class="pageItem">
		<view class="tab">
			<view class="btn" :class="type == '0' ? 'btn_s':''" data-type='0' @click="tabChange">可使用</view>
			<view class="btn" :class="type == '1' ? 'btn_s':''" data-type='1' @click="tabChange">已使用</view>
			<view class="btn" :class="type == '2' ? 'btn_s':''" data-type='2' @click="tabChange">已过期</view>
		</view>
		<view class="noMsg" v-if="(type == '0' && coupon_y.length == 0) || (type == '1' && coupon_n.length == 0) || (type == '2' && coupon_e.length == 0)">
			<image class="n_img" src="../../static/nodata.png" mode="widthFix"></image>
			<view class="n_txt">暂无优惠券</view>
		</view>
		<view class="main">
			<block  v-if="type == '0'">
				<view class="list" v-for="(item,index) in coupon_y" :key="'c_'+index">
					<image class="l_img" src="../../static/coupon_bg.png"></image>
					<view class="l_con">
						<view class="l_c_t1">￥{{item.b}}</view>
						<view class="l_c_t2">满{{item.a}}使用</view>
						<view class="l_c_time">{{item.ex}} 到期</view>
					</view>
				</view>
			</block>
			<block  v-if="type == '1'">
				<view class="list" v-for="(item,index) in coupon_n" :key="'c_'+index">
					<image class="l_img" src="../../static/coupon_bg.png"></image>
					<view class="l_con">
						<view class="l_c_t1">￥{{item.b}}</view>
						<view class="l_c_t2">满{{item.a}}使用</view>
						<view class="l_c_time">{{item.ex}} 到期</view>
					</view>
					<view class="mask">已使用</view>
				</view>
			</block>
			<block  v-if="type == '2'">
				<view class="list" v-for="(item,index) in coupon_e" :key="'c_'+index">
					<image class="l_img" src="../../static/coupon_bg.png"></image>
					<view class="l_con">
						<view class="l_c_t1">￥{{item.b}}</view>
						<view class="l_c_t2">满{{item.a}}使用</view>
						<view class="l_c_time">{{item.ex}} 到期</view>
					</view>
					<view class="mask">已过期</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				coupon_y:[],
				coupon_n:[],
				coupon_e:[],
				type:'0',
			};
		},
		onShow(){
			let me = this;
		
			me.loadData();
		},
		methods: {
			loadData(){
				let me = this;
				me.Net._get('users_coupon',{},(res)=>{
					me.coupon_y=res.data.y;
					me.coupon_n=res.data.n;
					me.coupon_e=res.data.e;
				}); 
			},
			tabChange(e){
				this.type = e.currentTarget.dataset.type;
			}
		}
	}
</script>

<style lang="scss">
.noMsg{
	width: 100%;
	position: fixed;
	top: 25vh;
	text-align: center;
	z-index: 90;
	.n_img{
		width: 25vw;
	}
	.n_txt{
		padding-top: 5vw;
		font-size: 30rpx;
		color: #7c7c7c;
	}
}
.tab{
	width: 100%;
	position: fixed;
	z-index: 99;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 4%;
	height: 14vw;
	background: #F1F1F1;
	.btn{
		width: 30%;
		height: 10vw;
		border: 1rpx solid #b6b6b6;
		color: #959595;
		text-align: center;
		border-radius: 15rpx;
		line-height: 10vw;
		font-size: 30rpx;
		font-weight: bold;
	}
	.btn_s{
		border: none !important;
		background: #FF2C2C;
		color: #ffffff !important;
	}
}
.main{
	position: relative;
	z-index: 10;
	padding: 13vw 4% 3vw;
	width: 100%;
	display: inline-block;
	.list{
		width: 100%;
		position: relative;
		height: 170rpx;
		margin-top: 30rpx;
		.l_img{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
		}
		.mask{
			position: absolute;
			z-index: 4;
			height: 100%;
			width: 100%;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(202, 202, 202, 0.7);
			font-size: 50rpx;
			font-weight: bold;
			color: #ffffff;
		}
		.l_con{
			width: 100%;
			height: 100%;
			position: relative;
			z-index: 3;
			color: #ffffff;
			display: flex;
			align-items: center;
			.l_c_t1{
				width: 36%;
				font-size: 50rpx;
				letter-spacing: 6rpx;
				font-weight: bold;
				text-align: center;
			}
			.l_c_t2{
				flex: 1;
				text-align: right;
				padding-right: 40rpx;
				font-size: 32rpx;
			}
			.l_c_time{
				position: absolute;
				bottom: 10rpx;
				right: 40rpx;
				font-size: 26rpx;
			}
		}
	}
}
</style>
